<template>
	<div class="UserCenter">
		<v-header></v-header>
		<div class="me">
			<div class="user-img">
				<img v-if='userData.imgUrl' v-bind:src="userData.imgUrl" :onerror="avatar">
				<img v-else-if="userData.sex === '男'" src="../../../kbc/h5/img/css/common/man.png">
				<img v-else-if="userData.sex === '女'" src="../../../kbc/h5/img/css/common/woman.png">
				<img v-else src="../../../kbc/h5/img/css/common/man.png">
			</div>
			<div class="title">
				<p class="name" v-if="userData.userName ===''">未设置账号</p>
				<p class="name" v-else>{{userData.userName}}</p>
				<p class="member">{{memberName}}</p>
			</div>
		</div>
		<div class="UserCenter-tab">
			<mt-cell to='/kbc/h5/Certification' :title="$t('my.RealNameAuthentication')">
				<i slot="icon" class="iconfont" style="background:#FF4F2D;">&#xe661;</i>
			</mt-cell>
			<div class="div-padding-box">
				<mt-cell to='/kbc/h5/MobileBind' :title="$t('my.BindingCellPhone')">
					<i slot="icon" class="iconfont" style="background:#AE5BFE;">&#xe626;</i>
				</mt-cell>
				<mt-cell to='/kbc/h5/WechatBind' :title="$t('my.BindingWechat')">
					<i slot="icon" class="iconfont" style="background:#00CC66">&#xe628;</i>
				</mt-cell>
				<mt-cell to="/kbc/h5/AplipayBind" :title="$t('my.BindingAplipay')">
					<i slot="icon" class="iconfont" style="background:#009BF7;">&#xe65b;</i>
				</mt-cell>
				<mt-cell to='/kbc/h5/EmailBoxBind' :title="$t('my.BindingEmail')">
					<i slot="icon" class="iconfont" style="background:#F32043;">&#xe630;</i>
				</mt-cell>
				<mt-cell to='/kbc/h5/BankCarBind' :title="$t('my.BindingBankCard')">
					<i slot="icon" class="iconfont" style="background:#00B7FF;">&#xe6a4;</i>
				</mt-cell>
			</div>
			<mt-cell to='/kbc/h5/TradePwdUpdate' :title="$t('my.ModifyingTransactionPassword')">
				<i slot="icon" class="iconfont" style="background:#4CAF50;">&#xe609;</i>
			</mt-cell>
			<mt-cell to='/kbc/h5/LoginPwdUpdate' :title="$t('my.ModifyingLoginPassword')">
				<i slot="icon" class="iconfont" style="background:#cecece;">&#xe609;</i>
			</mt-cell>
		</div>
	</div>
</template>
<style>
	.UserCenter{margin-top: 4rem;}
	.UserCenter .me{ width: 100%; margin: 0 auto 1rem; padding: 1rem 0; background: #fff; display: flex; box-sizing: border-box; text-align:left;}
	.UserCenter .user-img{width:80px;text-align:left; padding:0 10px;}
	.UserCenter .user-img img{ width:80px; height:80px; border-radius: 50%;display: block;}
	.UserCenter .name{font-size:1.4rem; margin-bottom:1rem; font-weight: 700;}
	.UserCenter .member{font-size: 1.1rem;color: #FF4949;}
	.UserCenter .title{padding:10px 1.5rem 10px 10px;font-size:1.4rem;}
	.UserCenter .mint-cell:before{
		   content:" ";
		   position: absolute;
		   top:20px;
		   right:15px;
		   display: block;
		   width: 10px;
		   height: 10px;
		   border-top: 1px solid #d9d9d9;
		   border-right: 1px solid #d9d9d9;
		   transform:rotate(45deg);
	}
	.UserCenter .mint-cell-title{position: relative;}
	.UserCenter .mint-cell-title .mint-cell-text{ margin-left:4rem;}
	.UserCenter .mint-cell .iconfont{ margin-right:1.2rem;font-size:1.4em;
	  position: absolute; top:-0.4rem;left:0; 
	  background:#ccc;
	  padding: 0.2rem; text-align: center;
	  color: #fff;
	  border-radius: 5px;
	  display: block;
	  overflow: hidden;
     width: 2rem;
	}
	.UserCenter-tab{overflow-y: scroll;}
	.UserCenter-tab .mint-cell:first-child{
		    background-image: -webkit-linear-gradient(bottom, #d9d9d9, #d9d9d9 50%, transparent 50%);
		    background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
		    background-size: 100% 1px;
		    background-repeat: no-repeat;
		    background-position: top;
     }
    .UserCenter .div-padding-box{margin: 10px 0 10px 0;}
</style>
<script>
	import router from './../../router';
    import util from './../../js/util/util.js'; 
    import vHeader from './../common/Header.vue';
    import{Cell} from 'mint-ui';
    export default {
    	data(){
    		return {
    			 userData:{},
//  			 avatar: 'this.src = "https://www.kbccoin.cn/kbc/img/login/KBC-pc.png"'
				 avatar: 'this.src="' + require('../../../kbc/h5/img/css/common/man.png') + '"',
				 memberName:''
    			  /*{
				    "id": 1,
				    "openId": "oDAEOv4aV21upSgx7JLZPbhdEYbU",
				    "username": "oDAEOv4aV21upSgx7JLZPbhdEYbU@nursingWork",
				    "name": "晖",
				    "birthday": "1997-12-07",
				    "phoneNum": "13985160123",
				    "gender": "male",
				    "avatar": "http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&hs=0&pn=3&spn=0&di=169813820110&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=547138142%2C3998729701&os=1840643701%2C1875487181&simid=3533872911%2C354593644&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=head&bdtype=0&oriquery=%E5%A4%B4%E5%83%8F&objurl=http%3A%2F%2Fwww.hnlywz.com%2Fa%2Fupload%2Fbd118381382.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bigsyoz_z%26e3Bv54AzdH3F8da9bld_z%26e3Bip4s&gsm=0",
				    "createdById": null
				},*/
    		}
    	},
    	created() {
    		 this.$store.state.headings=this.$router.history.current.name; //修改标题
    		 this.$store.state.isFooterShow = false; //显示底部导航
//  		 this.$store.state.flag = 3;
    	},
        components:{
            vHeader,
            Cell
        },
        methods:{
        	
        },mounted: function () { //加载完成后执行
        	var $this = this;
			util.Ajax('/userCentered/getMemeberById', "POST",{},function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.userData = data.member;
						$this.memberName = util.getMemberName(data.member.level);
					} else {
						Toast(data.msg);
					}
				}
			})
//			this.userData = this.$route.query.data;
      	}
    }
</script>
